<script setup>
import { ref } from 'vue';
import { $t } from '@/locales';
import ActivitySearch from './modules/activity-search.vue';

const searchParams = ref({
  taskNumber: undefined,
  participatingStores: []
});

const typeOptions = [
  { label: '固定金额', value: 0 },
  { label: '折扣券', value: 1 },
  { label: '积分券', value: 2 }
];
const channelsOptions = [
  { label: '全部', value: 0 },
  { label: 'Feed', value: 1 },
  { label: '直播', value: 2 },
  { label: '隐藏', value: 3 }
];

const fileList = ref([]);
const model = ref(createDefaultModel());
function createDefaultModel() {
  return {
    name: '',
    code: '',
    time: '',
    isEnable: false,
    type: undefined,
    amount: undefined,
    useCount: undefined,
    minAmount: undefined,
    deduction: undefined,
    channels: undefined
  };
}
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <ActivitySearch v-model:model="searchParams" />
    <ElCard class="overflow-auto card-wrapper">
      <ElForm :model="model" label-placement="left" label-width="145px">
        <ElRow>
          <ElCol :span="12">
            <ElFormItem :label="$t('page.coupons.name')" prop="name">
              <ElInput v-model="model.name" :placeholder="$t('page.coupons.form.name')" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem :label="$t('page.coupons.code')" prop="code">
              <ElInput v-model="model.code" :placeholder="$t('page.coupons.form.code')" />
            </ElFormItem>
          </ElCol>
        </ElRow>
        <ElFormItem :label="$t('page.coupons.time')" prop="time">
          <ElDatePicker
            v-model="model.time"
            type="daterange"
            :start-placeholder="$t('page.coupons.form.start')"
            :end-placeholder="$t('page.coupons.form.end')"
          ></ElDatePicker>
        </ElFormItem>
        <ElFormItem :label="$t('page.coupons.type')">
          <div class="flex-col">
            <div class="flex">
              <span class="mr-16px">{{ $t('page.coupons.storeCoupon') }}</span>
              <ElSwitch v-model="model.isEnable" />
            </div>
            <ElUpload
              v-model:file-list="fileList"
              class="uploader"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              list-type="picture-card"
            >
              <ElIcon :size="40">
                <SvgIcon icon="material-symbols:add" />
              </ElIcon>
            </ElUpload>
          </div>
        </ElFormItem>
        <ElFormItem :label="$t('page.coupons.type')">
          <div class="flex-col">
            <ElRadioGroup v-model="model.type">
              <ElRadio v-for="item in typeOptions" :key="item.value" :value="item.value" :label="item.label" />
            </ElRadioGroup>
            <ElInput v-model="model.amount">
              <template #prepend>Rp</template>
            </ElInput>
          </div>
        </ElFormItem>
        <ElFormItem :label="$t('page.coupons.useCount')" prop="name">
          <ElInput v-model="model.useCount" />
        </ElFormItem>
        <ElFormItem :label="$t('page.coupons.minAmount')">
          <ElInput v-model="model.minAmount">
            <template #prepend>Rp</template>
          </ElInput>
        </ElFormItem>
        <ElFormItem :label="$t('page.coupons.deduction')">
          <ElInput v-model="model.deduction">
            <template #prepend>Rp</template>
          </ElInput>
        </ElFormItem>
        <ElFormItem :label="$t('page.coupons.channels')">
          <ElRadioGroup v-model="model.channels">
            <ElRadio v-for="item in channelsOptions" :key="item.value" :value="item.value" :label="item.label" />
          </ElRadioGroup>
        </ElFormItem>
        <ElFormItem>
          <ElButton type="primary">{{ $t('page.coupons.startAdd') }}</ElButton>
        </ElFormItem>
      </ElForm>
    </ElCard>
  </div>
</template>

<style lang="scss" scoped>
.uploader {
  :deep(.el-upload--picture-card) {
    --el-upload-picture-card-size: 80px;
  }
}
</style>
